<template>
  <el-row style="display: flex; justify-content: space-between;">
    <el-col :span="12">
      <el-card class="beautiful-chart-card">
        <h3 class="elegant-chart-title">商品数量最少统计(前 5)</h3>
        <div id="top5CnameAndCountDiv" class="stylish-chart-column"></div>
      </el-card>
    </el-col>
    <el-col :span="12">
      <el-card class="beautiful-chart-card">
        <h3 class="elegant-chart-title">商品分类占比</h3>
        <div id="allCnameAndCountDiv" class="stylish-chart-column"></div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted } from "vue";
import goodsApi from "@/api/goodsApi.js";
import categoryApi from "@/api/categoryApi.js";

function column() {
  goodsApi.selectByFive()
      .then(resp => {
        let data = [];
        let count = [];
        resp.data.forEach(item => {
          data.push(item.name);
          count.push(item.count);
        });
        const myChart = echarts.init(document.getElementById('top5CnameAndCountDiv'));
        const option = {
          title: {
            text: '前 5 的分类和数量',
            textStyle: {
              color: '#000000',
              fontWeight: 'lighter'
            }
          },
          legend: {
            data: ['数量'],
            right: '10%',
            itemWidth: 10,
            itemHeight: 10,
            textStyle: {
              color: '#000000'
            }
          },
          xAxis: {
            data: data,
            axisLine: {
              show: true,
              lineStyle: {
                color: "#000000",
                width: 1
              }
            },
            axisTick: {
              show: false
            },
            asisLabel: {
              interval: 0
            }
          },
          yAxis: {
            axisLine: {
              show: true,
              lineStyle: {
                color: "#000000",
                width: 1
              }
            },
            splitLine: {
              show: false
            }
          },
          series: [
            {
              name: '数量',
              type: 'bar',
              data: count,
              barWidth: '20%'
            }
          ]
        };
        myChart.setOption(option);
      });
}

function pieChart() {
  goodsApi.all()
      .then(resp => {
        let data = [];
        let count = [];
        resp.data.forEach(item => {
          data.push(item.name);
          count.push(item.count);
        });
        const myChart = echarts.init(document.getElementById('allCnameAndCountDiv'));
        const option = {
          legend: {
            data: data,
            right: '10%',
            itemWidth: 10,
            itemHeight: 10,
            textStyle: {
              color: '#000000'
            }
          },
          series: [
            {
              name: '数量',
              type: 'pie',
              radius: '55%',
              center: ['40%', '50%'],
              data: data.map((name, index) => ({
                value: count[index],
                name: name
              })),
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };
        myChart.setOption(option);
      });
}

onMounted(() => {
  column();
  pieChart();
});
</script>

<style scoped>
.beautiful-chart-card {
  border: 2px solid #b3b3b3;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  padding: 20px;
  background-color: #fcfcfc;
}

.stylish-chart-column {
  width: 650px;
  height: 500px;
  border: 2px solid #e8e8e8;
}

.elegant-chart-title {
  color: #555;
  font-size: 18px;
  text-align: center;
  margin-bottom: 15px;
}
</style>